<template>
  <div class="course">
    <div class="head flex item-center">
      <el-radio-group @input="changeType" v-model="params.status" size="medium">
        <el-radio-button v-for="item in studyStatus" :key="item.id" 
          :label="item.value" >{{ item.title }}</el-radio-button>
      </el-radio-group>
      <div class="flex" style="margin-left: 20px;">
        <el-input 
        @keyup.enter.native="handleKeyup"
          v-model="params.name" placeholder="请输入内容"></el-input>
        <el-button @click="search()" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="content">
      <ul style="margin-bottom: 10px;">
        <li class="flex shadow-bottom" v-for="item of courses" :key="item.id">
          <div class="img-center" :style="{backgroundImage: `url(${item.show_tpdz})`}"></div>
          <div class="course-info">
            <h3 class="black bold">{{ item.name }}</h3>
            <div class="small bold">讲师：{{ item.teacher || '未知' }}</div>
            <div class="clearfix duration">
              <div class="left small" style="margin-right: 5px;">时长：{{ item.duration || 0 }}</div>
              <div class="left small">学时：{{ item.lesson || 0 }}</div>
            </div>
            <p class="bold middle ppp" style="--p: 2">{{ item.introduction }}</p>
            <ul class="btns flex item-center">
              <li><el-button type="primary" size="mini" @click="startStudy(item)">继续学习</el-button></li>
              <!-- <li><el-button type="primary" size="mini">随堂测验</el-button></li>
              <li><el-button type="primary" size="mini">考试</el-button></li> -->
              <li >
                <el-progress :percentage="item.progress || 21" ></el-progress>
              </li>
            </ul>
            
          </div>
        </li>
      </ul>
      <el-pagination background layout="prev, pager, next" :total="total"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Api from '@/api'
export default {
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 7
      },
      total: 0,
      studyStatus: [
            { id: 1, value: null, title: '全部', current: true },
            { id: 2, value: 1, title: '未开始', current: false },
            { id: 3, value: 2, title: '进行中', current: false },
            { id: 4, value: 3, title: '已结束', current: false }
          ],
      courses: [

      ]
    }
  },
  mounted() {
    this.getCourse()
  },
  methods: {
    search() {
          if (!this.params.name || !this.params.name.trim().length) {
            this.params.name = null
          }
          this.params.pageNum = 1
          this.params.pageSize = 5
          this.getCourse()
        },
        handleKeyup(event) {
          if (event.keyCode === 13 && !event.shiftKey) {
            this.search()
          }
        },
    changeType() {
          this.params.pageNum = 1
          this.params.pageSize = 5
          this.getCourse()
        },
    getCourse() {
      Api.courseListPage(this.params).then(res => {
        this.courses = res.data.rows
        this.total = res.data.total
      })
    },
    changeStatus(status) {
      this.studyStatus.forEach(item => item.current = item.id === status.id)
    },
    changePage(val) {
      this.params.pageNum = val
      this.getCourse()
    },
    startStudy(course) {
      this.$router.push(`/course/${course.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.current {
  color: var(--color-primary);
  border-color: var(--color-primary) !important;
}
.course {
  padding: 0 10px;
  .head {
    margin: 20px 0;
    justify-content: flex-end;
    .status {
      li {
        width: 64px;
        text-align: center;
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #ccc;
      }
    }
  }
  .content {
    >ul {
      >li {
        margin-top: 20px;
        transition: all .3s;
        &:hover {
          box-shadow: 0 5px 20px #ddd;
        }
        &>div:first-of-type {
          margin-right: 10px;
          width: 300px;
          height: 180px;
        }
        .course-info {
          width: calc(100% - 320px) ;
          position: relative;
          padding-top: 10px;
          h3,
          .duration{
            margin-bottom: 10px;
            div {
              padding: 3px 5px;
              background-color: #ff5500;
              border-radius: 3px;
              color: #fff;
            }
          }
          .btns {
            position: absolute;
            width: 100%;
            height: 30px;
            bottom: 10px;
            left: 0;
            >li:not(:last-of-type) {
              margin-right: 5px;
            }
            >li:last-child {
              width: 300px;
              margin-left: auto;
            }
          }
        }
      }
      
    }
  }
}
</style>